<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title><%= state.config.github_organisation %> CI Orchestrator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="icon" type="image/x-icon" href="https://brew.sh/assets/img/favicon.ico" sizes="48x48">
    <link rel="icon" type="image/svg+xml" href="https://brew.sh/assets/img/brewtestbot.svg" sizes="any">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script>
      const darkSchemeMedia = window.matchMedia("(prefers-color-scheme: dark)");
      function updateTheme(mediaQuery) {
        document.documentElement.dataset.bsTheme = mediaQuery.matches ? "dark" : "light";
      }
      updateTheme(darkSchemeMedia);
      darkSchemeMedia.addEventListener("change", updateTheme);
    </script>
  </head>
  <body>
    <nav class="navbar navbar-expand bg-body-tertiary">
      <div class="container-xxl flex-wrap">
        <div class="navbar-brand">
          <img src="https://brew.sh/assets/img/brewtestbot.svg" alt="" width="48" height="48" class="d-inline-block me-1">
          <span class="align-middle"><%= state.config.github_organisation %> CI Orchestrator</span>
        </div>
        <ul class="navbar-nav flex-fill">
          <li class="nav-item flex-fill text-nowrap text-end">
            <span>Logged in as <%= user.fetch(:username) %></span>
            <img class="rounded-1 ms-1" src="<%= user.fetch(:avatar_url) %>" width="32" height="32">
          </li>
        </ul>
      </div>
    </nav>
    <main class="container-xxl py-3" style="--bs-gutter-x: 2rem">
      <div class="d-md-flex align-items-start">
        <div class="flex-shrink-0">
          <div class="nav nav-pills flex-column border-end pe-3 gap-1" role="tablist" aria-orientation="vertical">
            <button class="nav-link active text-start" id="jobs-tab" data-bs-toggle="pill" data-bs-target="#jobs-tab-pane" type="button" role="tab" aria-controls="jobs-tab-pane" aria-selected="true">🛠️ Jobs</button>
            <% state.thread_runners.each_with_index do |runner, index| %>
            <div class="d-flex">
              <button class="nav-link text-start flex-fill" id="runner<%= index %>-tab" data-bs-toggle="pill" data-bs-target="#runner<%= index %>-tab-pane" type="button" role="tab" aria-controls="runner<%= index %>-tab-pane" aria-selected="false">⚙️ <%= runner.name %></button>
              <% if runner.pausable? %>
              <form action="<%= runner.paused? ? "/unpause" : "/pause" %>" method="post" class="d-flex ms-1">
                <input type="hidden" name="thread_runner" value="<%= runner.name %>">
                <% if runner.paused? %>
                <button type="submit" style="--bs-btn-padding-y: 0; width: 2.5rem" class="btn btn-success">&#9654;&#xFE0E;</button>
                <% else %>
                <button type="submit" style="font-size: 0.5rem; font-family: Arial; --bs-btn-padding-y: 0; width: 2.5rem" class="btn btn-danger">&#9616;&nbsp;&#9612;</button>
                <% end %>
              </form>
              <% end %>
            </div>
            <% end %>
            <button class="nav-link text-start" id="metadata-tab" data-bs-toggle="pill" data-bs-target="#metadata-tab-pane" type="button" role="tab" aria-controls="metadata-tab-pane" aria-selected="false">ℹ️ GitHub Runner Metadata</button>
            <button class="nav-link text-start" id="pause-tab" data-bs-toggle="pill" data-bs-target="#pause-tab-pane" type="button" role="tab" aria-controls="pause-tab-pane" aria-selected="false">⏸️ Global Pause</button>
          </div>
          <p class="small mb-md-0 mt-3">Page generated at <%= Time.now %></p>
        </div>
        <div class="tab-content ps-3 flex-fill">
          <div class="tab-pane show active" id="jobs-tab-pane" role="tabpanel" aria-labelledby="jobs-tab" tabindex="0">
            <div class="table-responsive">
              <table class="table mb-0 align-middle">
                <thead>
                  <tr>
                    <th class="d-none d-sm-table-cell" style="width: 32px"></th>
                    <th>Runner Name</th>
                    <th>GH State</th>
                    <th>Orka VM ID</th>
                    <th>Set up?</th>
                  </tr>
                </thead>
                <tbody>
                  <% state.jobs.each do |job| %>
                  <tr>
                    <td class="d-none d-sm-table-cell">
                      <div class="position-relative">
                        <img src="/img/runner/<%= job.os.partition("-").first %>.png" width="32" height="32" onerror="this.style.visibility = 'hidden'">
                        <% if job.arm64? %>
                        <p class="position-absolute bottom-0 m-0 w-100 text-center rounded text-bg-primary user-select-none" style="font-size: 8px">arm64</p>
                        <% end %>
                      </div>
                    </td>
                    <td><a href="https://github.com/<%= state.config.github_organisation %>/<%= job.repository %>/actions/runs/<%= job.run_id %>/attempts/<%= job.run_attempt %>"><%= job.runner_name %></a></td>
                    <td><%= job.github_state.to_s.split("_").map(&:capitalize).join(" ") %></td>
                    <td><%= job.orka_vm_id %></td>
                    <td><%= job.orka_setup_timeout? ? "◷" : (job.orka_setup_complete? ? "✓" : "✕") %></td>
                  </tr>
                  <% end %>
                </tbody>
              </table>
            </div>
          </div>
          <% state.thread_runners.each_with_index do |runner, index| %>
          <div class="tab-pane" id="runner<%= index %>-tab-pane" role="tabpanel" aria-labelledby="runner<%= index %>-tab" tabindex="0">
            <pre class="mb-0 d-flex flex-column-reverse" style="max-height: 32em; font-size: 75%; white-space: pre-wrap">
              <div><% runner.log_history.each { |event| %><span class="<%= "text-danger" if event.error? %>"><%= h event.to_s + "\n" %></span><% } %></div>
            </pre>
          </div>
          <% end %>
          <div class="tab-pane" id="metadata-tab-pane" role="tabpanel" aria-labelledby="metadata-tab" tabindex="0">
            <h4>Runner Downloads</h4>
            <div class="table-responsive">
              <table class="table">
                <thead>
                  <tr>
                    <th>Archive</th>
                    <th>OS</th>
                    <th>Arch</th>
                  </tr>
                </thead>
                <tbody>
                  <% state.github_runner_metadata.download_urls&.each do |os, arch_map| %>
                  <% arch_map.each do |arch, url_data| %>
                  <tr>
                    <%
                      basename = begin
                        File.basename(URI.parse(url_data.url).path)
                      rescue URI::InvalidURIError
                        "(parse error)"
                      end
                    %>
                    <td><a href="<%= url_data.url %>"><%= basename %></a></td>
                    <td><%= os %></td>
                    <td><%= arch %></td>
                  </tr>
                  <% end %>
                  <% end %>
                </tbody>
              </table>
            </div>
            <p class="mb-0">
              <small><strong>Last retrieved:</strong> <%= state.github_runner_metadata.download_fetch_time || "Never" %></small>
            </p>
          </div>
          <div class="tab-pane" id="pause-tab-pane" role="tabpanel" aria-labelledby="pause-tab" tabindex="0">
            <% pausable_count = state.thread_runners.count { |runner| runner.pausable? } %>
            <% paused_count = state.thread_runners.count { |runner| runner.pausable? && runner.paused? } %>
            <% if paused_count == pausable_count %>
            <p>Queue is currently <span class="text-danger">paused</span>.</p>
            <form action="/unpause" method="post">
              <button type="submit" class="btn btn-success">Unpause all</button>
            </form>
            <% elsif paused_count > 0 %>
            <p>Queue is currently <span class="text-warning">partially paused</span>.</p>
            <% else %>
            <p>Queue is currently <span class="text-success">running</span>.</p>
            <form action="/pause" method="post">
              <button type="submit" class="btn btn-danger">Pause all</button>
            </form>
            <p class="mb-0 mt-3">Pausing will not interrupt VMs mid-deployment. Please allow a few minutes for all Orka API operations to cease.</p>
            <% end %>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>
